<template>
  <view>
    <!-- 已有日期选择列表 -->
    <view v-for="(date, index) in selectedDates" :key="index" class="form-card">
      <!-- 添加删除按钮 -->
      <view class="header-row">
        <text class="form-label" :class="{required: required}">{{getLabel(index)}}</text>
        <!-- 只有当有多个日期时才显示删除按钮 -->
        <text v-if="selectedDates.length > 1" class="remove-btn" @click="removeDate(index)">删除</text>
      </view>
      <picker mode="date" fields="day" :end="currentDate" :value="date" @change="(e) => handleDateChange(e, index)">
        <view class="picker-item">
          <text>{{ date || placeholder }}</text>
        </view>
      </picker>
      <view class="divider"></view>
    </view>
    
    <!-- 添加新日期的按钮 -->
    <view v-if="selectedDates.length < maxDates || maxDates === 0" class="add-button" @click="addDateField">
      <text>+ 添加手术时间</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'MultiDatePicker',
  props: {
    label: {
      type: String,
      required: true
    },
    modelValue: {
      type: Array,
      default: () => []
    },
    placeholder: {
      type: String,
      default: '请选择日期'
    },
    required: {
      type: Boolean,
      default: false
    },
    maxDates: {
      type: Number,
      default: 0 // 0表示不限制
    },
    // 新增：是否允许删除最后一个日期
    allowRemoveLast: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      currentDate: this.getCurrentDate(),
      selectedDates: []
    }
  },
  created() {
    // 初始化时，如果没有数据则添加一个空项
    if (this.modelValue && this.modelValue.length > 0) {
      this.selectedDates = [...this.modelValue];
    } else {
      this.selectedDates = [''];
      // 通知父组件有一个空项
      this.$emit('update:modelValue', [...this.selectedDates]);
    }
  },
  watch: {
    modelValue(newVal) {
      // 当父组件传来新值时，如果为空则添加一个空项
      if (newVal && newVal.length > 0) {
        this.selectedDates = [...newVal];
      } else {
        this.selectedDates = [''];
      }
    }
  },
  methods: {
    getCurrentDate() {
      const date = new Date()
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`
    },
    getLabel(index) {
      return "第" + (index + 1) + "次" + this.label;
    },
    handleDateChange(e, index) {
      this.selectedDates[index] = e.detail.value;
      this.$emit('update:modelValue', [...this.selectedDates]);
      this.$emit('change', [...this.selectedDates]);
    },
    addDateField() {
      if (this.maxDates > 0 && this.selectedDates.length >= this.maxDates) {
        return;
      }
      this.selectedDates.push('');
      this.$emit('update:modelValue', [...this.selectedDates]);
      this.$emit('change', [...this.selectedDates]);
    },
    removeDate(index) {
      // 添加删除确认逻辑
      uni.showModal({
        title: '提示',
        content: '确定要删除这个手术时间吗？',
        success: (res) => {
          if (res.confirm) {
            // 检查是否允许删除最后一个日期
            if (this.selectedDates.length === 1 && !this.allowRemoveLast) {
              uni.showToast({
                title: '至少需要保留一个手术时间',
                icon: 'none'
              });
              return;
            }
            
            this.selectedDates.splice(index, 1);
            this.$emit('update:modelValue', [...this.selectedDates]);
            this.$emit('change', [...this.selectedDates]);
            this.$emit('remove', index); // 新增删除事件
          }
        }
      });
    }
  }
};
</script>

<style scoped>
/* 原有样式保持不变 */
.form-card {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
  position: relative;
}

/* 新增：头部行样式 */
.header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.form-label {
  font-size: 32rpx;
  color: #333;
  display: block;
}

.form-label.required::before {
  content: '*';
  color: #f44336;
  margin-right: 8rpx;
}

.picker-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 30rpx;
  color: #666;
  height: 80rpx;
  line-height: 80rpx;
}

.divider {
  height: 1rpx;
  background: #eee;
  margin: 20rpx -30rpx 0;
}

.add-button {
  margin-top: 20rpx;
  padding: 20rpx;
  color: #007aff;
  text-align: center;
  font-size: 30rpx;
  border: 1rpx dashed #007aff;
  border-radius: 8rpx;
}

/* 修改删除按钮样式 */
.remove-btn {
  color: #f44336;
  font-size: 28rpx;
  padding: 8rpx 16rpx;
  border: 1rpx solid #f44336;
  border-radius: 8rpx;
  background: #fff;
}
</style>
